<script setup>
	import {
		nextTick,
		reactive,
		ref
	} from 'vue'
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from "@dcloudio/uni-app";

	import {
		jumpTo,
		navigateTo
	} from "@/utils/common"

	import http from '@/api/roomAPI'

	import Day from './components/day.vue'

	import {
		useStore
	} from "@/stores/index"
	const userStore = useStore()

	const data = reactive({
		info: {},
		statusTimer: null,
		current: 0,
		imgOptions: {
			preview: true, // 启用图片预览
			maxWidth: '100%', // 图片最大宽度
		}
	})

	const sonDays = ref(null);

	async function toggleCurrent(i) {
		data.current = i

		if (data.statusTimer) {
			clearInterval(data.statusTimer)
			data.statusTimer = null
		}

		if (i > 0) {
			data.statusTimer = setInterval(async function() {
				if (sonDays.value) {
					await sonDays.value.getStatus();
				}
				// getStatus()
			}, 300000)
		}
		await LoadBanner()
	}



	//离开页面销毁(跳转下一页)
	onHide(() => {
		if (data.statusTimer) {
			clearInterval(data.statusTimer)
			data.statusTimer = null
		}
	})

	//返回上一页停止调用
	onUnload(() => {
		if (data.statusTimer) {
			clearInterval(data.statusTimer)
			data.statusTimer = null
		}
	})

	onLoad(async (options) => {
		if (options.days > 0) {
			data.current = +options.days
		} else {

			data.current = userStore.user.userInfo.days || 0;

			if (data.current == 8) {
				data.current = 7
			}
		}

		await LoadBanner()
	})

	onShow(async () => {
		await LoadBanner()
		if (sonDays.value) {
			await sonDays.value.getStatus();
		}
	})

	const LoadBanner = async () => {
		if (data.current < 1) {
			const res = await http.getBanner(data.current)
			data.info = res.data
		}
	}

	const onImgClick = (obj) => {

		uni.previewImage({
			urls: [obj.src]
		});
	}
</script>

<template>
	<uni-header />
	<view class="nav">
		<view class="left" :class="{ isActive: data.current === 0 }" @click="toggleCurrent(0)">
			<text class="logo">IVMCR</text>
			<text> · 7 DAYS 介绍与规则</text>
		</view>
		<text class="day" v-for="(, i) in 7" @click="toggleCurrent(i + 1)" :class="{ isActive: data.current === i + 1 }"
			:key="i">day{{ i + 1 }}</text>
	</view>

	<!-- 内容区 -->
	<scroll-view scroll-y class="main">
		<view class="Ivmcr" v-if="data.current < 1">
			<view style="height: 46rpx" />
			<image class="banner" :src="data.info.url" mode="widthFix" />

			<view class="title-box">
				<text class="cn">{{ data.info.title }}</text>
				<text class="en">{{ data.info.name }}</text>
			</view>

			<!-- 			<sunny-video class="video" ref="sunnyVideoRef" title="" :src="data.info.video_url"
				:poster="data.info.video_image" :seekTime="0" /> -->
			<view v-if="data.info.video_url">
				<video :src="data.info.video_url" :poster="data.info.video_image" class="video" object-fit="fill"
					:show-fullscreen-btn="false"></video>

				<view class="title-box">
					<text class="cn">{{ data.info.video_title }}</text>
					<text class="en">{{ data.info.video_name }}</text>
				</view>
			</view>
			<!-- <rich-text class="article" :nodes="data.details"></rich-text> -->
			<u-parse class="article" :preview="false" :html="data.info.details" @imgtap="onImgClick"
				:show-with-animation="true"></u-parse>
		</view>
		<Day ref="sonDays" :days="data.current" v-else />
		<view style="text-align: right;padding-right: 20rpx;font-size: 20rpx;">v0.0.184</view>
	</scroll-view>
</template>

<style lang="scss" scoped>
	:deep(.u-toast) {
		font-size: 10px !important;
	}

	.nav {
		margin-top: 20rpx;
		--color: #5e5e5e;
		padding: 40rpx 20rpx 40rpx 20rpx;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;

		.left {
			// margin-right: 30rpx;
			// padding-bottom: 18rpx;
			padding-bottom: 16rpx;

			>text {
				display: block;
				width: fit-content;

				color: var(--color);
				font-size: 18rpx;
				font-weight: 600;
				line-height: 22rpx;
				text-align: left;
			}

			&.isActive>text {
				pointer-events: none;
				color: #000;
				font-weight: 700;
				width: 200rpx;
				font-size: 20rpx;
			}

			.logo {
				letter-spacing: 6rpx;
			}
		}

		.day {
			padding: 16rpx;
			color: var(--color);
			font-size: 18rpx;
			font-weight: 600;
			line-height: 22rpx;
			text-align: center;

			&.isActive {
				color: #c18813;
				font-size: 20rpx;
				font-weight: 700;
				pointer-events: none;
			}
		}
	}

	.main {
		// height: calc(100% - 344rpx);
	}

	.Ivmcr {
		.banner {
			width: 100%;
			// height: 495rpx;
			background-color: #c4c4c4;
		}

		.title-box {
			padding-left: 30rpx;
			padding-right: 30rpx;
			padding-top: 75rpx;
			padding-bottom: 20rpx;

			.cn {
				display: block;
				color: rgb(111, 111, 111);
				font-size: 22rpx;
				font-weight: 600;
				line-height: 24rpx;
				text-align: left;
			}

			.en {
				display: block;
				color: rgb(111, 111, 111);
				font-size: 16rpx;
				font-weight: 600;
				line-height: 18rpx;
				text-align: left;
			}
		}

		.video {
			display: block;
			// margin: 14rpx auto 0;
			width: 100%;
			height: 422rpx;
			// border-radius: 23rpx;
		}

		.article {
			display: block;
			padding: 36rpx 26rpx 50rpx 30rpx;
			color: #6f6f6f;
			font-size: 22rpx;
			font-weight: 600;
			line-height: 24rpx;
			text-align: left;
		}
	}
</style>